<template>
    <div class="app-container">
    <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :lg="8" class="col-item">
            <el-card class="box-card" shadow="always">
                <div slot="header">
                    <span>个人资料</span>
                </div>
                <ul class="item">
                    <el-row style="height: 120px">
                        <el-col :span="24">
                            <el-avatar :size="size" :src="require('@/assets/images/header.jpg')" alt="用户头像" :key="1">
                                <img :src="require('@/assets/images/img.png')" alt="失败头像"/>
                            </el-avatar>
                        </el-col>
                    </el-row><el-divider/>
                    <el-row>
                        <el-col :span="12"><span class="floatLeft"> 登录名称：</span></el-col>
                        <el-col :span="12"><span class="floatRight" v-text="form.userName"/></el-col>
                    </el-row><el-divider/>
                    <el-row>
                        <el-col :span="12"><span class="floatLeft"> 邮箱号码：</span></el-col>
                        <el-col :span="12"><span class="floatRight" v-text="form.myeMail"/></el-col>
                    </el-row><el-divider/>
                    <el-row>
                        <el-col :span="12"><span class="floatLeft"> 所属部门：</span></el-col>
                        <el-col :span="12"><span class="floatRight" v-text="form.depName"/></el-col>
                    </el-row><el-divider/>
                    <el-row>
                        <el-col :span="12"><span class="floatLeft"> 联系地址：</span></el-col>
                        <el-col :span="12"><span class="floatRight" v-text="form.address"/></el-col>
                    </el-row><el-divider/>
                    <el-row>
                        <el-col :span="12"><span class="floatLeft"> 创建时间：</span></el-col>
                        <el-col :span="12"><span class="floatRight" v-text="form.createTime"/></el-col>
                    </el-row><el-divider/>
                </ul>
            </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="16" class="col-item">
            <el-card class="box-card" shadow="always">
                <div slot="header">
                    <span>基本资料</span>
                </div>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="基本资料" name="userInfo" class="userInfo">
                        <el-form :model="form" ref="userInfoForm" :rules="rules" label-width="80px"
                                 size="small">
                            <el-form-item label="姓名" prop="realName">
                                <el-input v-model="form.realName" prefix-icon="fa fa-user" placeholder="姓名"/>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="myeMail">
                                <el-input v-model="form.myeMail" prefix-icon="fa fa-envelope-o"
                                          placeholder="邮箱"/>
                            </el-form-item>
                            <el-form-item label="手机" prop="phoneNumber">
                                <el-input v-model="form.phoneNumber" prefix-icon="fa fa-phone"
                                          placeholder="手机"/>
                            </el-form-item>
                            <el-form-item label="性别：" prop="sex">
                                <el-radio-group style="float: left" v-model="form.sex">
                                    <el-radio v-for="datastate in SexOptions"
                                              :key="datastate.dataType"
                                              :label="datastate.dataType">
                                        {{datastate.dataName}}
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>
                        <div class="bottom">
                            <el-button  @click="closeToIndex" size="medium" icon="fa fa-reply-all"> 关 闭</el-button>
                            <el-button type="primary" @click="submitForm" size="medium" icon="fa fa-check"> 保 存
                            </el-button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="修改密码" name="password" class="userInfo">
                        <el-form :model="passform" ref="passwordForm" label-width="80px"
                                 :rules="passrules"
                                 size="small">
                            <el-form-item label="旧密码" prop="oldPassword">
                                <el-input v-model="passform.oldPassword" placeholder="请输入旧密码"
                                          show-password/>
                            </el-form-item>
                            <el-form-item label="新密码" prop="newPassword">
                                <el-input v-model="passform.newPassword" placeholder="请输入新密码"
                                          show-password/>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="newPassword1">
                                <el-input v-model="passform.newPassword1" placeholder="请确认密码"
                                          show-password/>
                            </el-form-item>
                        </el-form>
                        <div class="bottom">
                            <el-button @click="closeToIndex" size="medium" icon="fa fa-reply-all"> 关 闭</el-button>
                            <el-button type="primary" @click="updatePassword" size="medium" icon="fa fa-check">
                                保 存
                            </el-button>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </el-col>
    </el-row>
    </div>
</template>

<script>
    import { getUserAll, updateThis,updatePwdOld} from "@/api/user/user";

    export default {
        name: "personal",
        data() {
            return {

                activeName: 'userInfo',
                SexOptions: [],
                size:90,
                //码值
                rules: {
                },
                passrules:{},
                // 表单参数
                form: {},
                passform:{},

            };
        },
        created() {
            this.getdetails();
            this.getDicdataByType("sex_").then(response => {
                this.SexOptions = response.data;
            });
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            SexFormatter(row) {
                return this.selectLabel(this.SexOptions, row.state);
            },
            getdetails() {
                getUserAll().then(response => {
                        this.form = response.data;
                    });
            },
            closeToIndex(){
                this.$router.push({
                    path: "/index",
                })
            },
            submitForm() {
                this.$refs["userInfoForm"].validate(valid => {
                    if (valid) {
                        updateThis(this.form).then(response => {
                                if (response.code == 0) {
                                    this.msgSuccess("修改成功");
                                    this.open = false;
                                    this.handleQuery();
                                } else {
                                    this.msgError(response.msg);
                                }
                            })
                    }
                });
            },
            updatePassword() {
                this.$refs["passwordForm"].validate(valid => {
                    if (valid) {
                        updatePwdOld(this.passform).then(response => {
                            if (response.code == 0) {
                                this.msgSuccess("修改成功");
                                this.open = false;
                                this.handleQuery();
                            } else {
                                this.msgError(response.msg);
                            }
                        })
                    }
                });
            },
        }
    };
</script>

<style scoped>
    .box-card{
        margin-left: 20px;
        margin-top: 20px;
    }
    .floatLeft {
        float: left;
    }
    .floatRight {
        float: right;
    }
    .box-card ul {
        color: #606266;
        font-size: 14px;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .box-card .item .el-divider{
        margin-top:5px;
        margin-bottom: 20px;
        line-height: 1px;
    }
</style>